<template>
  <div class="login">
    <img :src="imgSrc" width="100%" height="100%" alt="" />

    <div class="loginPart">
      <h2 style="color: #ffaeec">用户登录</h2>
      <el-form>
        <div class="inputElement">
           <el-form-item label="用户名">
              <el-input v-model="formInline.username" placeholder="用户名"></el-input>
            </el-form-item>

        </div>
        <div class="inputElement">
          <el-form-item label="密码">
            <el-input v-model="formInline.password" show-password placeholder="密码"></el-input>
          </el-form-item>
        </div>
        <div>
          <el-button type="primary" @click="login" style="background-color: #ef3d93;color: #f8de7a">登录</el-button>

        </div>
      </el-form>
    </div>
  </div>


</template>

<script>
export default {
  name: "LoginView",
  data() {
    return {
      imgSrc:require('../assets/Y[0F_3MW[KT(40KWAFIFOOU_tmb.png'),
      formInline:{},


      //2属性定义
    }
  }, methods: {

    login() {
      this.axios.post("userservice/user/login", this.formInline).then(res => {
        if (res.data.code == 200) {
          this.$message.success(res.data.msg);
          sessionStorage.setItem("loginName",this.formInline.username);
          sessionStorage.setItem("token", res.data.data);
          this.$router.push("index")
        } else {
          this.$message.error(res.data.msg);
        }
      })
    },



    //3自定义方法

  }, created() {
    //4.钩子函数
    var t = this;
    document.onkeydown = function(e){
      if(window.event == undefined){
        var key = e.keyCode;
      }else{
         key = window.event.keyCode;
      }
      //enter的ASCII码是13
      if(key == 13){
        t.login();//t.登录方法
      }
    }
  }
}
</script>

<style scoped>
/*.login{*/
/*  width: 100%;*/
/*  height: 100%;*/
/*  position: fixed;*/
/*  background-size: 100% 100%;*/
/*  background-repeat: no-repeat;*/
/*  background-image: url("../assets/67e55f5a-3afc-4674-be59-556190468ee4.jpg");*/
/*}*/
.loginPart{
  position:absolute;
  /*定位方式绝对定位absolute*/
  top:50%;
  left:50%;
  /*顶和高同时设置50%实现的是同时水平垂直居中效果*/
  transform:translate(-50%,-50%);
  /*实现块元素百分比下居中*/
  width:450px;
  padding:50px;
  background: rgba(0,0,0,.5);
  /*背景颜色为黑色，透明度为0.8*/
  box-sizing:border-box;
  /*box-sizing设置盒子模型的解析模式为怪异盒模型，
  将border和padding划归到width范围内*/
  box-shadow: 0px 15px 25px rgba(0,0,0,.5);
  /*边框阴影  水平阴影0 垂直阴影15px 模糊25px 颜色黑色透明度0.5*/
  border-radius:15px;
  /*边框圆角，四个角均为15px*/
}
.loginPart h2{
  margin:0 0 30px;
  padding:0;
  color: #fff;
  text-align:center;
  /*文字居中*/
}
.loginPart .inputbox{
  position:relative;
}
.loginPart .inputElement input{
  width: 100%;
  padding:10px 0;
  font-size:16px;
  color:#fff;
  letter-spacing: 1px;
  /*字符间的间距1px*/
  margin-bottom: 30px;
  border:none;
  border-bottom: 1px solid #fff;
  outline:none;
  /*outline用于绘制元素周围的线
  outline：none在这里用途是将输入框的边框的线条使其消失*/
  background: transparent;

  /*背景颜色为透明*/
}

.login{
  width:100%;
  height:100%;

}

</style>